<template>
  <view>
  	<z-paging ref="paging" v-model="dataList" @query="queryList">
  		<template #top>
  			<tn-navbar>追缴</tn-navbar>
  			<tn-input v-model="inputValue" placeholder="请输入车牌查询" @change="filterData">
  				<template #suffix>
  					<view class="tn-ml tn-mr" @click="filterData">
  						<tn-icon name="search" color=" tn-gray_bg"></tn-icon>
  					</view>
  				</template>
  			</tn-input>
  			<view class="tn-shadow  ">
  				<view class="tn-flex tn-mt-sm justify-end tn-pr-sm  tn-pb-sm ">
  					<view class="tn-flex tn-blue_text" @click="openEditPopup"><tn-icon name="filter"></tn-icon>筛选</view>
  				</view>
  
  
  			</view>
  		</template>
	   <!-- 停车支付查询的内容 -->
		<view class="list">
			 <view class="  tn-flex justify-around tn-p items-center tn-border-bottom tn-gray-disabled_border " v-for="(item,index) in 11" :key="index">
				 <!-- 车牌-->
				 <view class="tn-flex-column">
				 					<tn-icon name="taxi" color="tn-blue" size="40" />
				 					 
				 </view>
				 <view class="tn-flex-column">
					 <text class="  ">{{'浙B A31121'}}</text>
					  <text class=" tn-mt-sm tn-grey_text ">{{'高层车'}}</text>
				 </view>
				 
				 <view class="tn-flex-column tn-grey_text">
				 					 <text class=" ">{{'入：2024-01-01 12:21:23'}}</text>
				 					  <text class="tn-mt-sm ">{{'出：2024-01-01 12:21:23'}}</text>
				 </view>
				   <view class="tn-flex-column">
					   <text :class="index%2==0?'tn-red_text':'tn-teal_text'">{{index%2==0?'待支付':'追缴成功'}}</text>
					    <text v-if="index==2" class="tn-orange_text tn-mt-sm">{{'发提醒'}}</text>
				   </view>
				 
			 </view>
			
		</view>
		
	<template #loadingMoreNoMore> </template>
	</z-paging>
		
 
  </view>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    return {
      // 停车支付查询的逻辑
    };
  },
};
</script>

<style scoped>
/* 样式 */
</style>
